<template>
  <div class="video-player">
    <video 
      ref="videoRef"
      class="video-element"
      :src="src"
      :type="type"
      :poster="poster"
      controls
      @loadedmetadata="onLoadedMetadata"
      @play="onPlay"
      @pause="onPause"
      @ended="onEnded"
    >
      您的浏览器不支持视频播放。
    </video>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { playShortVideo } from '@/api/modules/shortVideo'

const props = defineProps<{
  src: string
  type?: string
  poster?: string
  videoId?: number
}>()

const emit = defineEmits<{
  (e: 'play'): void
  (e: 'pause'): void
  (e: 'ended'): void
}>()

const videoRef = ref<HTMLVideoElement | null>(null)
const hasPlayed = ref(false)

// 视频元数据加载完成
const onLoadedMetadata = () => {
  // 可以在这里处理元数据加载完成事件
}

// 播放事件
const onPlay = async () => {
  // 只有在第一次播放时调用后端接口增加播放次数
  if (!hasPlayed.value && props.videoId) {
    try {
      await playShortVideo({ video_id: props.videoId })
      hasPlayed.value = true
    } catch (error) {
      console.error('增加播放次数失败:', error)
    }
  }
  emit('play')
}

// 暂停事件
const onPause = () => {
  emit('pause')
}

// 结束事件
const onEnded = () => {
  emit('ended')
}
</script>

<style scoped>
.video-player {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; /* 16:9 宽高比 */
  background-color: #000;
  border-radius: 8px;
  overflow: hidden;
}

.video-element {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  outline: none;
  object-fit: cover;
}
</style>